<template lang="html">
  <div class="count">
    <i><wioc-icon-svg class="icon" :name="dataItem.icon"></wioc-icon-svg></i>
    <div class="num">{{dataItem.num}}<span>{{dataItem.quantifiers}}</span></div>
  </div>
</template>

<script>
export default {
  name: 'wioc-count',
  props: ['dataItem'],
  data () {
    return{
    }
  }
}
</script>

<style lang="less" scoped>
 .count{
	 font-size:0;
	 i{
		display: inline-block;
		width: .45rem;
		height: .45rem;
		line-height: .45rem;
		text-align: center;
		border-radius: 40%;
		  background-color: #7ad9a6;
		  box-shadow: 0 0.02rem 0  #7ad9a6, //左边阴影
		  0 0 0  #7ad9a6, //顶部阴影
		0 0.05rem 0 rgba(#7ad9a6,0.3), //底部阴影
		0 0.02rem 0  #7ad9a6; //右边阴影
		svg{
			width: .24rem;
			height: .24rem;
			color: #fff;
		}
	 }
   .num{
	   display: inline-block;
       font-size: 0.22rem;
       font-weight: bolder;
       line-height: 0.22rem;
       color: #595959;
       margin-left: .12rem;
	   vertical-align: bottom;
       span{
           font-size: .1rem;
           margin-left: .02rem;
           vertical-align: initial;
       }
      }
 }
</style>
